<template>
  <el-dialog
    title="查看报警信息"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="missionPart"
  >
    <el-form
      :model="dataForm"
      ref="dataDForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="140px"
    >
      <div class="tablePart">
        <el-form-item label="泵站：" prop="equipmentId">
          <el-select filterable v-model="dataForm.equipmentId" disabled>
            <el-option
              v-for="gItem in stationOptions"
              :key="gItem.id"
              :label="gItem.flowMeterName"
              :value="gItem.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="流量值：" prop="flowValue">
          <el-input v-model="dataForm.flowValue" label="设定峰值" readonly />
        </el-form-item>
        <el-form-item label="流量更新时间：" prop="flowTime">
          <el-input v-model="dataForm.flowTime" label="设定峰值" readonly />
        </el-form-item>
        <el-form-item label="流量报警最大值：" prop="flowUpperLimit">
          <el-input
            v-model="dataForm.flowUpperLimit"
            label="设定峰值"
            readonly
          />
        </el-form-item>
        <el-form-item label="流量报警最小值：" prop="flowLowerLimit">
          <el-input
            v-model="dataForm.flowLowerLimit"
            label="设定峰值"
            readonly
          />
        </el-form-item>
        <el-form-item label="压力值：" prop="pressValue">
          <el-input v-model="dataForm.pressValue" label="设定峰值" readonly />
        </el-form-item>
        <el-form-item label="压力更新时间：" prop="pressTime">
          <el-input v-model="dataForm.pressTime" label="设定峰值" readonly />
        </el-form-item>
        <el-form-item label="压力报警最大值：" prop="pressUpperLimit">
          <el-input
            readonly
            v-model="dataForm.pressUpperLimit"
            label="设定峰值"
          />
        </el-form-item>
        <el-form-item label="压力报警最小值：" prop="pressLowerLimit">
          <el-input
            readonly
            v-model="dataForm.pressLowerLimit"
            label="设定峰值"
          />
        </el-form-item>
        <el-form-item label="电力更新时间：" prop="electricTime">
          <el-input v-model="dataForm.electricTime" label="设定峰值" readonly />
        </el-form-item>
        <el-form-item label="流量计断电时报警：" prop="status">
          <el-radio-group v-model="dataForm.status" disabled>
            <el-radio :label="1">正常通电</el-radio>
            <el-radio :label="0">备用电池运作</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="报警描述：" prop="description" class="fullList">
          <el-input
            readonly
            type="textarea"
            rows="6"
            v-model="dataForm.description"
          />
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      checked: true,
      warningCheck: true,
      stationOptions: [], // 泵站信息
      dataForm: {
        description: null, // 警报描述
        electricTime: null, // 电力更新时间
        equipmentId: null, // 设备id
        flowLowerLimit: null, // 流量下限值
        flowMeterName: null, // 流量计名称
        flowTime: null, // 流量值更新时间
        flowUpperLimit: null, // 流量上限值
        flowValue: null, // 流量值
        id: 0,
        isFlowAlarm: null, // 是否流量报警
        isOutageAlarm: null, // 是否断电报警
        isPressAlarm: null, // 是否压力报警
        name: null, // 流量计名称
        pressLowerLimit: null, // 压力下限值
        pressTime: null, // 压力更新时间
        pressUpperLimit: null, // 压力上限值
        pressValue: null, // 压力值
        status: null, // 电力状态（0为备用电池，通电）
        type: null // 类型（1调度中心爬取，2丹灶数据，3纯手抄）
      }
    };
  },
  mounted() {
    this.getStationOption(); // 获取流量计数据
  },
  methods: {
    init(id) {
      this.dataForm.id = id || null;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataDForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(
              `/cms/tbAlarmRecord/info/${this.dataForm.id}`
            ),
            method: "get"
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm = data.tbAlarmRecord;
            }
          });
        }
      });
    },
    // 获取泵站信息
    getStationOption() {
      this.$http({
        url: this.$http.adornUrl(`/cms/tbEquipment/combo`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.stationOptions = data.list;
        } else {
          this.stationOptions = [];
        }
      });
    }
  }
};
</script>
